<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
    <!-- 添加苹果设备特定的meta标签 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- 添加安卓设备沉浸式状态栏支持 -->
    <meta name="theme-color" content="#1976D2">
    <title>AI助理</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- 添加mPaaS JSBridge -->
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
</head>
<body>
    <div class="app-container">
        <!-- 顶部菜单栏，设置为隐藏 -->
        <header hidden>
            <div class="header-top">
                <h1>AI助理</h1>
                <button class="toggle-header-btn"><i class="fas fa-chevron-down"></i></button>
            </div>
            <div class="header-collapsible">
                <p class="subtitle">随时随地，轻松查询菜单信息</p>
                <div class="header-buttons">
                    <button class="new-conversation-btn"><i class="fas fa-plus"></i> 新对话</button>
                    <button class="reload-btn"><i class="fas fa-sync-alt"></i> 重新加载</button>
                </div>
                <div class="feature-controls">
                    <label class="toggle-container">
                        <input type="checkbox" id="quickReplyToggle" checked>
                        显示快捷回复
                    </label>
                </div>
            </div>
        </header>
        
        <div class="chat-container">
            <!-- 动态内容将在这里显示 -->
        </div>
        
        <div class="input-container">
            <!-- 语音输入区域 -->
            <div class="voice-input-area" id="voiceInputArea">
                <div class="voice-icon-container">
                    <img src="{{ url_for('static', filename='icon/aiinput.png') }}" alt="语音" class="input-icon">
                </div>
                <span class="voice-prompt-text">按住说话</span>
            </div>
            
            <!-- 文本输入区域 (默认隐藏) -->
            <div class="text-input-wrapper" id="textInputWrapper" style="display: none;">
                <textarea id="userInput" placeholder="请输入您的问题..."></textarea>
                <button class="send-button" id="sendButton">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
            
            <!-- 模式切换按钮 -->
            <button class="keyboard-toggle" id="keyboardToggle">
                <img src="{{ url_for('static', filename='icon/keyboard.png') }}" alt="键盘" class="input-icon">
            </button>
        </div>
        
        <div class="recording-indicator">
            <div class="recording-dots">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="recording-text">正在录音...</div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html> 